<template>
      <div>
            <el-card style="width:400px;margin:60px auto">
                  <div slot="header">
                    <img src="@/assets/logo.png">注册
                  </div>
                  <!-- 注册 -->
                  <el-form ref="form" :model="formData" :rules="rules" status-icon label-width="80px" label-position="left">
                    <!-- 用户名 -->
                        <el-form-item label="用户名" prop="username">
                             <el-input v-model="formData.username"></el-input>
                        </el-form-item>
                        <!-- 密码 -->
                        <el-form-item label="密码" prop="password">
                              <el-input v-model="formData.password" type="password"></el-input>
                        </el-form-item>
                        <!-- 确认密码 -->
                        <el-form-item label="确认密码" prop="rePassword">
                              <el-input v-model="formData.rePassword" type="password"></el-input>
                        </el-form-item>
                        <!-- 邮箱 -->
                        <el-form-item label="邮箱" prop="email">
                              <el-input v-model="formData.email"></el-input>
                        </el-form-item>
                        <!-- 手机 -->
                        <el-form-item label="手机" prop="phone">
                              <el-input v-model="formData.phone"></el-input>
                        </el-form-item>
                        <el-form-item style="text-align:right">
                              <router-link to="/users/login" class="reg">已有账号?立即登录></router-link>
                        </el-form-item>
                        <el-form-item>
                              <el-button type="primary" @click="add" :icon="btnIcon" :disabled="buttonDisabled">确 定</el-button>
                              <el-button @click="$refs.form.resetFields()">重置</el-button>
                        </el-form-item>
                  </el-form>
            </el-card>
      </div>
</template>
<script>

export default {
  data() {
    // 验证密码格式是否正确
    var validatePass1 = (rule, value, cb) => {
      var reg = /^(\w){6,20}$/;
      if (reg.test(value)) {
        cb();
      } else {
        cb(new Error("只能输入6-20个字母、数字、下划线"));
      }
    };
    // 验证两次密码输入是否一致
    var validatePass2 = (rule, value, cb) => {
      if (value != this.formData.password) {
        cb(new Error("两次密码输入不一致"));
      } else {
        cb();
      }
    };
    // 验证手机格式是否正确
    var validatePhone = (rule, value, cb) => {
      let reg=/^1[3456789]\d{9}$/
      if (reg.test(value)) {
        cb();
      } else {
        cb(new Error('手机号码不正确'));
      }
    };
    // 验证用户名是否存在
    var usernameExist=(rule,value,cb)=>{
        this.$http.post('/users/usernameExist',this.$qs.stringify({username:value})).then((result)=>{
            if(result.data.data=='false'){
                  cb()
              }else{
                    cb(new Error('用户名已被注册'))
              }
        })
      };
    // 验证手机是否存在
    var phoneExist=(rule,value,cb)=>{
        this.$http.post('/users/phoneExist',this.$qs.stringify({phone:value})).then((result)=>{
            if(result.data.data=='false'){
                  cb()
              }else{
                    cb(new Error('手机已被注册'))
              }
        })
      };
    // 验证邮箱是否被注册
      var emailExist=(rule,value,cb)=>{
        this.$http.post('/users/emailExist',this.$qs.stringify({email:value})).then((result)=>{
            if(result.data.data=='false'){
                  cb()
              }else{
                    cb(new Error('邮箱已被注册'))
              }
        })
      };
    return {
      formData: {
        btnIcon:'',
        buttonDisabled:false,
        username: "",
        password: "",
        rePassword: "",
        email:'',
        phone:''
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "change" },
          { min: 4, max: 18, message: "长度在4~18位间", trigger: "change" },
          {validator:usernameExist, trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "change" },
          { validator: validatePass1, trigger: "change" }
        ],
        rePassword: [
          { required: true, message: "请再次输入密码", trigger: "change" },
          { validator: validatePass2, trigger: "change" }
        ],
        email:[
          {required:true,message:'请输入邮箱',trigger:"blur"},
          {type:'email',message:'邮箱必须填写',trigger:["blur","change"]},
          {validator:emailExist,trigger:'blur'}
        ],
        phone:[
          {required:true,message:'请输入手机号码',trigger:"blur"},
          {validator:validatePhone,trigger:'blur'},
          {validator:phoneExist,trigger:'blur'}
        ]
      }
    };
  },
  methods:{
    // 保存添加
        add(){
              this.$refs.form.validate((pass)=>{
                    if(pass){
                          this.btnIcon='el-icon-loading'
                          this.buttonDisabled=true   
                          this.$http.post('/users/add',this.$qs.stringify(this.formData)).then((result)=>{
                                  this.btnIcon=''
                                  this.buttonDisabled=false   
                                  console.log('注册成功')
                                  this.$router.push({name:'login'})
                          })
                    }
              })
        }
  }
};
</script>
<style>
.reg{
      color: #f56c6c;
}
</style>





